<template>
	<div class="adm2">
		<div class="tabs">

			<el-container>
				<el-main>
					<el-header>
						<div class="book-title">个人信息修改</div>
					</el-header>
					<div class="book-admin">
						<el-form :model="formData" class="demo-form-inline" label-position="left">
							<el-form-item label="修改密码">
								<el-input v-model.lazy.trim="formData.password" type="password" placeholder="请输入密码" />
							</el-form-item>
							<el-form-item label="修改名字">
								<el-input v-model.lazy.trim="formData.nickname" placeholder="请输入名字" />
							</el-form-item>
							<el-form-item label="修改电话">
								<el-input v-model.lazy.trim="formData.phone" type="number" placeholder="请输入电话" />
							</el-form-item>

							<el-form-item label="修改头像">
								<div style="margin-top: 15px; display: flex" class="image">

									<div style="display: flex">
										<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
											:before-upload="beforeUpload" :file-list="fileList" :on-change="handleChange" action="uploadAction"
											list-type="picture" accept=".jpg, .jpeg, .png, .gif">
											<el-button type="primary">上传图片</el-button>
										</el-upload>
									</div>
								</div>
							</el-form-item>

						</el-form>
						<div class="btn">
							<el-button type="success" class="regbtn" @click="updatePwd" v-loading="isLoading">修改密码</el-button>
							<el-button type="danger" class="regbtn" @click="uploadImg" v-loading="isLoading">修改头像</el-button>
							<el-button type="primary" class="regbtn" @click="updateNicknameOrPhone" v-loading="isLoading">修改名字 /
								电话</el-button>
						</div>
					</div>
				</el-main>
			</el-container>

		</div>

	</div>
</template>

<script>
import { showLoading } from "../../../utils/loading";
import { $post, $postUpload } from "@/ajax";
import { mapMutations } from "vuex";
export default {
	name: 'Adm2',
	data () {
		return {
			isLoading: false,
			showLoading: showLoading,
			fileList: [],
			formData: {
				nickname: '',
				password: '',
				phone: '',
			}
		}
	},
	methods: {
		...mapMutations("user", ["getCirecleImg", "getName"]),
		//上传器的方法
		beforeUpload (file) {
			console.log("beforeUplaod");
		},
		handleChange (file, fileList) {
			this.fileList = fileList;
		},

		// 更新头像
		async uploadImg () {
			// 如果头像没有改变，就不上传
			if (this.fileList.length == 0) {
				return;
			}
			this.isLoading = true;
			// 上传头像
			let formData = new FormData();
			formData.append("file", this.fileList[0].raw);
			const result = await $postUpload(`/api/fore/user/updateImg`, formData);
			// 如果 上传头像成功，就更新用户信息
			if (result.status === 200) {
				//把新的用户头像地址存到Vuex
				this.getCirecleImg(result.data.data);
				window.location.reload();
				this.isLoading = false;
				this.$message.success({
					message: '头像修改成功',
					duration: 1000,
				})

				// 清空上传的图片
				this.fileList = [];
			}

		},

		// 更新密码
		async updatePwd () {
			if (this.formData.password == '') {
				this.$message.error({
					message: '密码不能为空',
					duration: 1000,
				})
				return;
			}

			const result = await $post(`/api/fore/user/updatePwd`, this.formData.password);
			if (result.status === 200) {
				this.$message.success({
					message: '密码修改成功',
					duration: 1000,
				})

				// 清空密码
				this.formData.password = '';
			}
		},

		// 更新名字或者电话
		async updateNicknameOrPhone () {

			if (this.formData.nickname !== '') {
				const result = await $post(`/api/fore/user/updateInfo`, this.formData);

				if (result.status === 200) {
					this.$message.success({
						message: '名字修改成功',
						duration: 1000,
					})
					this.getName(this.formData.nickname);
					// 清空名字
					this.formData.nickname = '';
				}
			}

			if (this.formData.phone !== '') {
				const result = await $post(`/api/fore/user/updateInfo`, this.formData);
				if (result.status === 200) {
					this.$message.success({
						message: '电话修改成功',
						duration: 1000,
					})

					// 清空电话
					this.formData.phone = '';
				}
			}
		},

	}
}
</script>

<style scoped>
/* 分页 */
.book-pagination {
	display: flex;
	justify-content: center;
	margin-bottom: 5px;
}

.el-header {
	border: 1px solid gainsboro;
	display: flex;
	align-items: center;
	margin-top: 20px;
	justify-content: space-between;
	border-radius: 3px;
}

.el-header .book-title {
	font-size: 20px;
	margin-left: 20px;
	font-weight: bold;
}

.el-header .book-add {
	margin-right: 20px;
}

.el-button {
	height: 10px !important;
}

.book-admin {
	margin-top: 20px;
	border: 1px solid gainsboro;
}

.el-form {
	width: 90%;
	margin: 0 auto;
	margin-top: 10px;
}

.btn {
	margin: 50px;
	display: flex;
	justify-content: center;
}

.regbtn {
	display: block;
	margin: 0 auto;
	margin-bottom: 20px;
	width: 300px;
	height: 40px;

}
</style>






